<?php 
require "global_conn.php";
?>
<html>

<head>
<meta http-equiv="Content-Language" content="fr">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
</head>

<body link="#0000FF" vlink="#0000FF" alink="#0000FF">






<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>



<script src="js/main.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<style>
html, body{
	
	margin: 0px;
	padding: 0px;

}
#map-canvas {
	height: 100%;
	float:left;
	width:100%
}
.left{
	float:left;
	width:100%;
	
}
.controls {
	margin-top: 16px;
	border: 1px solid transparent;
	border-radius:0px 5px 5px 0px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	height: 32px;
	outline: none;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  }

  #pac-input {
	height:40px;
	background-color: #fff;
	padding: 0 11px 0 13px;
	width: 400px;
	font-family: Roboto;
	font-size: 15px;
	font-weight: 300;
	text-overflow: ellipsis;
  }

  #pac-input:focus {
	border-color: #4d90fe;
	margin-left: -1px;
	padding-left: 14px;  /* Regular padding-left + 1. */
	width: 401px;
  }

  .pac-container {
	font-family: Roboto;
  }

  #type-selector {
	color: #fff;
	background-color: #4d90fe;
	padding: 7px 11px 0px 11px;
	height:40px;
  }

  #type-selector label {
	font-family: Roboto;
	font-size: 13px;
	font-weight: 300;
  }
  #status{height:80px;}
  #statusPerimeter{height:50px;}
  #bar{padding:10px}
  #bar1{padding:10px}
  #bar2{padding:15px}
</style>
<input id="pac-input" class="controls" type="text" placeholder="Enter a location">

<div id="type-selector" class="controls">
	<label for="changetype-geocode">Submit</label>
</div>



<div class="left">
	
	
	<h3>
		Area output
	</h3>
	<div id="status">
	</div>
	<ul class="area">
	</ul>
	<hr>
	<h3>
		Perimeter output
	</h3>
	<div id="statusPerimeter">
	</div>
	<ul class="perimeter ">
	</ul>
	<hr>
	<div id="bar">
		<a href="javascript:void(0)" class="deleteLastMarkers btn btn-danger btn-default"><i class="icon-white icon-remove"></i> Delete last marker</a>
		<a href="javascript:void(0)" class="deleteMarkers btn btn-danger btn-default"><i class="icon-white icon-remove"></i> Delete all markers</a>
		
		<a href="javascript:void(0)" class="save btn btn-success btn-default"><i class="icon-white icon-plus-sign" ></i> Save and add</a>
		<a href="javascript:void(0)" class="markerBounds btn btn-success btn-default"><i class="icon-white icon-zoom-in" ></i> Zoom and center</a>
	</div>
	<div id="bar1">
		<br>
		<br>
		<label>
			Show markers  &nbsp;&nbsp;  Show border &nbsp;&nbsp; &nbsp;  Border color &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Color to fill inside 
			
		</label>
		<div class="btn-group show_markers" data-toggle="buttons-radio">
			<button name="color" type="button" show="yes" class="btn btn-danger active" value="btn ">Yes</button>
			<button name="color" type="button" show="no" class="btn btn-danger" value="btn">No</button>
			
			
		</div>

		<div class="btn-group show_border" data-toggle="buttons-radio">
			<button name="color" border="yes" type="button" class="btn active" value="btn ">Yes</button>
			<button name="color" border="no" type="button" class="btn" value="btn">No</button>
			
			
		</div>

		<div class="btn-group border_color" data-toggle="buttons-radio">
			<button name="color" type="button" color="red" class="btn btn-danger active" value="btn ">Red</button>
			<button name="color" type="button" color="blue" class="btn btn-info" value="btn">Blue</button>
			
		</div>
		<div class="btn-group color_fill" data-toggle="buttons-radio">
			
			<button name="color" type="button" color="green"  class="btn btn-success active" value="btn">Green</button>
			<button name="color" type="button" color="transparent" class="btn " value="btn ">Transparent</button>
		</div>
		
	</div>
	<div id="bar2">
		<div class="btn-group" data-toggle="buttons-radio">
			<a href="javascript:void(0)"  class="currentLocation btn btn-primary btn-large"><i class="icon-white icon-map-marker"></i> Current location</a>	
		</div>
	</div>
	<hr>
	<h3>
		Area lists
	</h3>
	<div class="bs-example" style="height: 200px;
overflow-y: scroll;">
    <table class="table">
      <thead>
        <tr>
          <th>#</th>
          <th>Date Time</th>
          <th>Cordinates</th>
          <th>Actions</th>
          
        </tr>
      </thead>
      <tbody>
        
      </tbody>
    </table>
  </div>
</div>
<div id="map-canvas"></div>

</body>

</html>